 /*
 * @description: 掌大精英管理
 * @Author: along
 * @Date: 2021-08-02
 * @Last Modified by:
 * @Last Modified time: 2021-08-02
 */
<template>
    <div class="container containerStudent">
        <!-- header -->
        <div class="header">
            <div class="header-box">
                <p class="header-title">学校名称:</p>
                <!-- <el-cascader
                    v-model="header.school"
                    :options="schoolList"
                    @change="getTableData(1)"
                    size="small"
                    clearable
                    :props="{
                        value: 'value',
                        label: 'label',
                        children: 'children'
                    }"
                /> -->
                <el-cascader
                    placeholder="请选择"
                    :options="provideList"
                    filterable
                    clearable
                    change-on-select
                    expand-trigger="click"
                    v-model="header.school"
                    @change="getTableData(1)"
                    size="small"
                    :props="{
                        label: 'name',
                        value: 'id',
                        children: 'children'
                    }"
                />
            </div>
            <div class="header-box">
                <p class="header-title">用户:</p>
                <el-input
                    v-model="header.tel"
                    placeholder="用户ID或手机号"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    class="search-ipt"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="header-box">
                <p class="header-title">
                    是否班级认证
                </p>
                <el-select
                    v-model="header.class_verify"
                    filterable
                    placeholder="全部"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        label="全部"
                        :value="99"
                    />
                    <el-option
                        label="是"
                        :value="1"
                    />
                    <el-option
                        label="否"
                        :value="0"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-title">邀请码:</p>
                <el-input
                    v-model="header.invitation"
                    placeholder="请输入邀请码"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    class="search-ipt"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <!--v2.0.9新精英系统隐藏-->
            <!--<div class="header-box">
                <p class="header-title">状态:</p>
                <el-select
                    v-model="header.status"
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                    clearable
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-title">考核结果:</p>
                <el-select
                    v-model="header.result"
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                    clearable
                >
                    <el-option
                        v-for="item in resultList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>-->
            <div class="header-box">
                <p class="header-title">加入时间:</p>
                <el-date-picker
                    v-model="header.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    @change="getTableData(1)"
                />
            </div>
            <div class="header-box">
                <p class="header-title">精英等级:</p>
                <el-select
                    v-model="header.start_level"
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                    clearable
                    :style="{width: '100px'}"
                >
                    <el-option
                        v-for="item in levelData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <span :style="{padding: '0 6px'}">-</span>
                <el-select
                    v-model="header.end_level"
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                    clearable
                    :style="{width: '100px'}"
                >
                    <el-option
                        v-for="item in levelData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <el-button
                    type="primary"
                    size="small"
                    @click="fnAddStudent()"
                >
                    新增管培生
                </el-button>
                <div class="btn-import-wrap">
                    <input
                        class="import-input"
                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        type="file"
                        @change="fnExportStudent($event)">
                    <el-button
                        type="primary"
                        size="small"
                        style="margin-right: 18px"
                    >
                        导入管培生
                    </el-button>
                </div>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnDownLoadTable()"
                >
                    下载demo表格
                </el-button>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            class="data-table"
        >
            <el-table-column
                label="序号"
                width="100px"
                align="center"
                type="index"
                fixed="left"
            />
            <el-table-column
                label="掌大精英信息"
                width="200"
                fixed="left"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div class="cell-title">
                        <div class="user-name">{{ scope.row.true_name ? scope.row.true_name : '--' }}</div>
                        <div class="user-tags">
                            <div class="tag-item">
                                <img
                                    src="@/assets/image/finance/class-light.png"
                                    v-if="scope.row.class_verify"
                                >
                                <img
                                    src="@/assets/image/finance/class.png"
                                    v-else
                                >
                            </div>
                        </div>
                    </div>
                    <div class="cell-tips">手机号：{{ scope.row.phone }}</div>
                    <div class="cell-tips">用户ID：{{ scope.row.student_no }}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="invite_no"
                label="邀请码"
                fixed="left"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="agent_level"
                label="等级"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    E{{ scope.row.agent_level }}
                </template>
            </el-table-column>
            <el-table-column
                prop="school_name"
                label="学校名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="school_college_name"
                label="学院名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="major_name"
                label="专业名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="grade_name"
                label="大几"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="join_time"
                label="加入时间"
                :width="140"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    {{ scope.row.join_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                label="等级保护截至期"
                align="left"
                width="200"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    {{ scope.row.agent_level_freeze_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                </template>
            </el-table-column>
            <!--v2.0.9新精英系统隐藏-->
            <!--<el-table-column
                prop="appraisal"
                label="考核结果"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.appraisal | setAppraisal }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                show-overflow-tooltip
                :formatter="emptyFormatter">
                <template slot-scope="scope">
                    <span>{{ scope.row.status | setStatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="agent_type"
                label="精英类型"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.agent_type == 1">自由精英</span>
                    <span v-else-if="scope.row.agent_type == 2">专职精英</span>
                    <span v-else>&#45;&#45;</span>
                </template>
            </el-table-column>-->
            <el-table-column
                label="操作"
                fixed="right"
                :width="180"
            >
                <template slot-scope="scope">
                    <div class="option-btn-group">
                        <!-- <el-button
                        type="text"
                        :class="scope.row.appraisal !== -1 ? 'curse-dis' : 'curse-add' "
                        v-if="authResult.auth_page"
                        :disabled="scope.row.appraisal !== -1"
                        @click="fnEliminate(scope.row)"
                    >
                        淘汰
                    </el-button>
                    <el-button
                        type="text"
                        :class="scope.row.status == 1 ? 'curse-dis' : 'curse-add'"
                        v-if="authResult.auth_page"
                        :disabled="scope.row.status == 1"
                        @click="fnDistribution(scope.row)"
                    >
                        分配
                    </el-button> -->
                        <el-button
                            type="text"
                            @click="fnGoPage(scope.row)"
                        >
                            查看数据
                        </el-button>
                        <el-button
                            type="text"
                            @click="showLog(scope.row)"
                        >
                            升降级记录
                        </el-button>
                        <el-button
                            type="text"
                            @click="fnRecharge(scope.row)"
                        >
                            充值
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- 新增管培生 -->
        <el-dialog
            title="新增掌大精英"
            :visible.sync="dialogVisibleAdd"
            width="622px"
            class="el-dialogAdd"
        >
            <el-form
                :model="ruleForm"
                class="demo-ruleForm"
                @submit.native.prevent
            >
                <el-form-item
                    label="搜索掌大精英手机号或唯一ID:"
                    label-width="200px"
                >
                    <el-input
                        v-model="ruleForm.tel"
                        size="small"
                        clearable
                        placeholder="手机号或用户ID"
                        class="search-ipt"
                        :style="{width: '350px'}"
                        @keyup.native.enter="fnGetUserTel()"
                    />
                </el-form-item>
                <el-tag
                    v-for="(tag,index) in dynamicTags"
                    :key="index"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.true_name }}-{{ tag.school_name }}--{{ tag.phone }}
                </el-tag>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="small"
                    @click="fnSubmitAdd()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- /新增管培生 -->

        <!-- 充值 -->
        <el-dialog
            title="充值"
            :visible.sync="dialogVisible"
            width="400px"
        >
            <div style="padding: 24px 32px">
                <div class="title">
                    <span>标题:</span>
                    <el-input
                        v-model="reChargeTitle"
                        @input="can"
                        placeholder="请输入标题"/>
                </div>
                <div class="money">
                    <span>金额:</span>
                    <el-input
                        v-model="reChargeNum"
                        @input="charge"
                        placeholder="请输入金额"/>
                </div>
                <span class="warning">确定后钱将打入对方账户，请谨慎操作！</span>
                <span
                    slot="footer"
                    class="dialog-footer"
                    style="margin-top: 24px"
                >
                    <el-button
                        plain
                        size="small"
                        style="width: 96px;margin-right: 24px"
                        @click="dialogVisible = false">取消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        style="width: 96px"
                        :disabled="!chargeDisabled"
                        @click="fnGoCharge()">充值</el-button>
                </span>
            </div>

        </el-dialog>
        <!-- /充值 -->
        <!-- 升降级记录 -->
        <el-dialog
            title="升降级记录"
            :visible.sync="logDialog"
            width="556px"
            :close-on-click-modal="false"
        >
            <div class="log-wrapper">
                <div
                    class="log-list"
                    v-if="logList.length"
                >
                    <div
                        class="log-item"
                        v-for="item in logList"
                        :key="item.id"
                    >
                        <div class="log-item__time">
                            {{ item.change_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </div>
                        <div class="log-item__desc">
                            E{{ item.old_level }}{{ item.from_type === 1 ? '自动' : '手动' }}{{ item.type === 1 ? '升级' : '降级' }}为E{{ item.new_level }}
                        </div>
                    </div>
                </div>
                <div
                    class="empty"
                    v-else
                >
                    暂无数据
                </div>
                <div
                    class="footer"
                    @click="logDialog = false"
                >
                    返回
                </div>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
        <!-- /分页 -->
    </div>
</template>

<script>
import {getDate} from '@/assets/js/utils';
export default {
    /**
     * @param  {Array}     tableData        //表单数据源
     * @param  {Object}    page             //分页
     * @param  {String}    school           //学校名称
     * @param  {Array}     schoolList       //城市+学校数据
     * @param  {String}    tel              //手机号码
     * @param  {String}    invitation       //邀请码
     * @param  {Number}    result           //考核结果
     * @param  {Array}     resultList       //考核结果数据
     * @param  {Number}    status           //状态
     * @param  {Array}     statusList       //状态数据
     * @param  {Boolean}   dialogVisibleAdd //新增管培生弹窗开关
     * @param  {Boolean}   dialogVisible    //充值弹窗开关
     * @param  {Object}    ruleForm         //新增管培生弹窗字段
     * @param  {Object}    rules            //新增管培生弹窗字段验证
     * @param  {Array}     dynamicTags      //新增管培生弹窗选中手机号
     */
    data () {
        return {
            provideList: [],
            chargeDisabled: false,
            chargeStudent_no:'',
            dialogVisible: false,
            reChargeTitle:'',
            reChargeNum:'',
            dynamicTags: [],
            ruleForm: {
                tel: ''
            },
            dialogVisibleAdd: false,
            header: {
                tel: '',
                school: '',
                invitation: '',
                result: 99,
                status: 99,
                time: [],
                class_verify: 99,
                start_level: '',
                end_level: ''
            },
            levelData: [
                {value: 0, label: 'E0'},
                {value: 1, label: 'E1'},
                {value: 2, label: 'E2'},
                {value: 3, label: 'E3'},
                {value: 4, label: 'E4'},
                {value: 5, label: 'E5'},
            ],
            schoolList: [],
            resultList: [{
                value: 99,
                label: '全部'
            },{
                value: -1,
                label: '不合格'
            },{
                value: 1,
                label: '合格'
            },{
                value: 0,
                label: '未判断'
            }],
            statusList: [{
                value: 99,
                label: '全部'
            },{
                value: 0,
                label: '已淘汰'
            },{
                value: 1,
                label: '正常'
            }],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {},
            indexSucess: 0,
            indexError: 0,
            // 升降级记录弹窗
            logDialog: false,
            logList: []
        };
    },
    watch: {
        dialogVisibleAdd (val) {
            if (!val) {
                this.dynamicTags = [];
                this.ruleForm.tel = '';
            }
        },
    },
    filters: {
        setAppraisal (val) {
            if (val == 1) {
                return '合格';
            } else if (val == 0) {
                return '未判断';
            } else if (val == -1) {
                return '不合格';
            }
        },
        setStatus (val) {
            if (val == 0) {
                return '已淘汰';
            } else if (val == 1) {
                return '正常';
            }
        }
    },
    created () {
        this.authResult = this.$route.meta.authResult;
        this.getParam();
        this.setHeader();
        this.getTableData();
        // this.getSchoolName();
        this.getSchoolTree();
    },
    methods: {
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '掌大精英'
            },
            {
                title: "掌大精英管理"
            }]
            );
        },

        /**
         * 获取url参数
         */
        getParam () {
            let query = this.$route.query;

            if (query.page !== undefined) {
                this.page.now_page = Number(query.page);
                this.header = JSON.parse(query.header);
            }
        },

        /**
         * 获取省+市+学校三级联动数据
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree', {},resp=>{
                if (resp.code == 1) {
                    this.provideList = resp.data.tree;
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 获取学校+城市
         */
        getSchoolName () {
            this.$post('/student/region_college%5Ccity_college_linkage', {},resp=>{
                if (resp.code == 1 && resp.data.length > 0) {
                    let list = [];

                    resp.data.map((item,index)=>{
                        list.push({
                            value: item.id,
                            label: item.name,
                            children: []
                        });
                        item.children.map(itm=>{
                            list[index].children.push({
                                value: itm.id,
                                label: itm.name
                            });
                        });
                        return false;
                    });
                    this.schoolList = list;
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/stuagent%5Cget_stuagent_list', {
                page_id: page || this.page.now_page,
                province_id: this.header.school !== '' ? this.header.school[0] : '',
                city_id: this.header.school !== '' ? this.header.school[1] : '',
                school_id: this.header.school !== '' ? this.header.school[2] : '',
                keyword_student_id: this.header.tel,
                invite_code: this.header.invitation,
                appraisal: this.header.result,
                status: this.header.status,
                join_start_time: this.header.time === null ? '' : getDate(new Date(this.header.time[0])),
                join_end_time: this.header.time === null ? '' : (getDate(new Date(this.header.time[1])) + 86400),
                class_verify: this.header.class_verify,
                min_level: this.header.start_level,
                max_level: this.header.end_level
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 新增管培生
         */
        fnAddStudent () {
            this.dialogVisibleAdd = !this.dialogVisibleAdd;
        },

        /**
         * 确认新增管培生
         */
        fnSubmitAdd () {
            if (this.dynamicTags.length == 0) {
                this.$message({
                    type: 'waring',
                    message: '新增数据不可以为空'
                });
            } else {
                this.dynamicTags.map(item=>{
                    this.$post('/student/stuagent%5Cadd',{
                        student_no: item.student_no
                    }, resp=> {
                        if (resp.code == 1) {
                            this.indexSucess++;
                        } else if (resp.code == 0) {
                            this.indexError++;
                        }
                    });
                });
                this.dialogVisibleAdd = !this.dialogVisibleAdd;
                setTimeout(()=>{
                    if (this.indexError > 0) {
                        this.$message({
                            type: 'waring',
                            message: `新增失败个数${this.indexError}个,请重新添加`
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                    }
                },500);
                setTimeout(()=>{
                    this.getTableData(1);
                },500);
            }
        },

        /**
         * 搜索管培生手机号
         */
        fnGetUserTel () {
            let arr = [];

            // if (this.ruleForm.tel.length == 11) {
            this.$post('/student/student_user%5Cget_by_student_id',{
                keyword: this.ruleForm.tel
            },resp=>{
                if (resp.code == 1 && resp.data.phone !== null) {
                    arr.push(resp.data);
                    this.dynamicTags = this.dynamicTags.concat(arr);
                    this.ruleForm.tel = '';
                }else if (resp.code == 1 && resp.data.phone === null) {
                    this.$message({
                        type: 'waring',
                        message: '手机号错误,查无此人'
                    });
                    this.ruleForm.tel = '';
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
            // } else {
            //     this.$message({
            //         type: 'waring',
            //         message: '请输入正确的手机号码'
            //     });
            //     this.ruleForm.tel = '';
            // }
        },

        /**
         * 移除手机号
         */
        handleClose (tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        /**
         * 导入管培生
         */
        fnExportStudent (event) {
            let file = event.target.files[0];
            let form = new FormData();

            form.append("file", file);
            this.$post('/student/stuagent%5Cimport', form, resp => {
                event.target.value = null;
                if (resp.code == 1) {
                    this.getTableData(1);
                    this.$message({
                        type: 'success',
                        message: '导入成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 下载demo表格
         */
        fnDownLoadTable () {
            let url = '//cdn.zsdx.cn/wei/file/agent_v.csv';

            window.open(url);
        },

        /**
         * 淘汰
         */
        fnEliminate (row) {
            this.$confirm('一旦淘汰将不可取消,是否确认?', '警告', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$post('/student/stuagent%5Cremove',{
                    student_no: row.student_no
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            });
        },

        /**
         * 分配
         */
        fnDistribution (row) {
            this.$router.replace({
                name: 'studentFans',
                query: {
                    phone: row.phone,
                    page: this.page.now_page,
                    header: JSON.stringify(this.header)
                }
            });
        },

        /**
         * 查看数据
         */
        fnGoPage (row) {
            this.$router.replace({
                name: 'studentData',
                query: {
                    student_no: row.student_no,
                    phone: row.phone,
                    page: this.page.now_page,
                    header: JSON.stringify(this.header)
                }
            });
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        /**
         * 充值
         */
        fnRecharge(row){
            this.dialogVisible = true;
            this.chargeStudent_no = row.student_no;
        },
        fnGoCharge(){
            this.dialogVisible = false;
            this.$post('/student/student_user%5Cchange_money', {
                student_no: this.chargeStudent_no,
                title:this.reChargeTitle,
                money:this.reChargeNum,
            }, resp => {
                if(resp.code == 1){
                    this.$notify({
                        type: 'success',
                        title: '成功',
                        message: resp.msg,
                    });
                } else if(resp.code == 0){
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        message: resp.msg,
                    });
                }

            });
        },
        can(){
            if(this.reChargeTitle!=''&& this.reChargeNum!=''){
                this.chargeDisabled = true;
            } else {
                this.chargeDisabled = false;
            }
        },
        charge(){
            if(this.reChargeTitle!=''&& this.reChargeNum!=''){
                this.chargeDisabled = true;
            } else {
                this.chargeDisabled = false;
            }
        },

        /**
         * 显示升降级记录弹窗
         * @param row
         */
        showLog(row) {
            let params = {
                agent_no: row.agent_no,
                type: 99
            };

            this.$post('/student/stuagent%5Cget_stuagent_level_log_list', params, resp => {
                if (resp.code === 1) {
                    this.logList = resp.data.list;
                    this.logDialog = true;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .header-box {
                display: flex;
                margin-right: 20px;
                align-items: center;
                color: #606266;
                margin-bottom: 12px;
                .header-title {
                    margin-right: 10px;
                    white-space: nowrap;
                }
                .btn-import-wrap {
                    margin-left: 15px;
                    display: inline-block;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                    vertical-align: top;
                    .import-input {
                        margin-left: -100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 200%;
                        height: 100%;
                        cursor: pointer;
                        opacity: 0;
                    }
                }
            }
            .header-right {
                display: flex;
                .el-button {
                    margin-left: 20px;
                }
            }
        }
        .curse-add {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        .curse-dis {
            color: #606266;
            cursor: pointer;
            opacity: .7;
        }
        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .el-tag {
        margin: 0 15px 15px 0;
    }
    .title , .money{
        .el-input{
            width: 240px;
            display: inline-block;
            margin-left: 5px;
        }
        span{
            position: relative;
        }
        span:before{
            content: '*';
            display: block;
            color: red;
            position: absolute;
            top: 5px;
            left: -9px;
        }
    }
    .money{
        margin-top: 15px;
    }
    .warning{
        display: block;
        margin-top: 5px;
        margin-left: 40px;
        font-size: 12px;
        color: red;
    }
    .cell-title {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        .user-name {
            max-width: 124px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .user-tags {
            display: flex;
            align-items: center;
            margin-left: 6px;
            .tag-item {
                margin-right: 4px;
                display: flex;
                align-items: center;
                img {
                    height: 14px;
                }
            }
        }
    }
    .cell-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3;
    }
    .cell-tips {
        color: #999;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 0;
    }
    .el-dialogAdd {
        /deep/ .el-dialog__body {
            padding: 24px 32px;
        }
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }
    /deep/ .el-table__fixed-right {
        right: 6px!important;
    }
    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        // 操作按钮
        .option-btn-group {
            .el-button {
                margin-left: 0;
                margin-right: 10px;
            }
        }
    }
    .log-wrapper {
        .log-list {
            padding: 38px 53px 10px;
            max-height: 400px;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            .log-item {
                margin-bottom: 28px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                display: flex;
                align-items: center;
                &__time, &__desc {
                    margin-right: 20px;
                }
                &__status {
                    .success {
                        color: #2FBDB3;
                    }
                    .warning {
                        color: #F79038;
                    }
                    .error {
                        color: #F95B56;
                    }
                    .normal {
                        color: #999999;
                    }
                }
            }
        }
        .empty {
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #909399;
        }
        .footer {
            height: 52px;
            background: #FFFFFF;
            border-radius: 0 0 4px 4px;
            border-top: 1px solid #E9E9E9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
        }
    }
</style>
<style lang="less">
    .containerStudent .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .containerStudent .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .containerStudent .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
</style>
